<template>
    <div id="checkreport" :style="{ width:  defaultW}">
        <!-- <div class="fff">
            <ecg-chart 
                :ecgvalue="ecgvalue"
                :headerData="headerData"
            ></ecg-chart>
            <div class="handleBtn">
                <div @click="handleEcg('back')">后退</div>
                <div @click="playEcg" v-if="status">播放</div>
                <div @click="pauseEcg" v-else>暂停</div>
                <div @click="handleEcg('forward')">前进</div>
            </div>
        </div> -->
        <div class="defaultBox patientBox">
            <div class="title">患者信息</div>
            <div class="content">
                <span class="name">姓名：张三</span>
                <!-- <span class="name">姓名：{{form.iecgCheckCondition.name}}</span> -->
                <span class="name">年龄：56岁</span>
                <span class="name">性别：女</span>
                <span class="name">检查前身体状况：头晕，胸闷</span>
            </div>
        </div>
        <div class="defaultBox hrBox">
            <div class="title">心率</div>
            <div class="content">
                <div class="box">
                    <span class="hrNum first">{{detail.maxHr}}bpm</span>
                    <span class="name">最高心率</span>
                </div>
                <div class="box">
                    <span class="hrNum second">{{detail.avgHr}}bpm</span>
                    <span class="name">平均心率</span>
                </div>
                <div class="box">
                    <span class="hrNum third">{{detail.minHr}}bpm</span>
                    <span class="name">最低心率</span>
                </div>
            </div>
        </div>
        <div class="defaultBox rangeBox">
            <div class="title">心率测量范围</div>
            <div class="content">
                <div class="box">
                    <div class="chart" :style="{ height: 22 / 60 * 100 + 'px', marginTop: 100 - (22 / 60 * 100) + 'px' }">
                        <span class="value">22%</span>
                    </div>
                    <span class="name">稍快稍慢</span>
                </div>
                <div class="box">
                    <div class="chart" :style="{ height: 60 / 60 * 100 + 'px', marginTop: 100 - (60 / 60 * 100) + 'px' }">
                        <span class="value">60%</span>
                    </div>
                    <span class="name">正常</span>
                </div>
                <div class="box">
                    <div class="chart" :style="{ height: 18 / 60 * 100 + 'px', marginTop: 100 - (18 / 60 * 100) + 'px' }">
                        <span class="value">18%</span>
                    </div>
                    <span class="name">过快过慢</span>
                </div>
            </div>
            <div class="tipsContent">
                <div class="tips">稍快：100-120BPM</div>
                <div class="tips">过快：> 120BPM</div>
                <div class="tips">稍慢：50-60BPM</div>
                <div class="tips">过慢：50BPM</div>
            </div>
        </div>
        <div class="defaultBox resultBox">
            <div class="title">检测结果</div>
            <div class="head">
                <span class="name">检测数据</span>
                <span class="name">测量值</span>
                <span class="name">正常值范围</span>
            </div>
            <div v-for="(item, index) in tableData" :key="index" class="content">
                <span class="type">{{item.type}}</span>
                <div class="valueBox">
                    <span class="value">{{item.value}}</span>
                    <img src="./../../../assets/resource/checkReport/down.png" alt="" v-if="item.value < item.range.split('-')[0]" class="arrow">
                    <img src="./../../../assets/resource/checkReport/up.png" alt="" v-if="item.value > item.range.split('-')[1]" class="arrow">
                    <div v-if="item.value >= item.range.split('-')[0] && item.value <= item.range.split('-')[1]" class="arrow"></div>
                </div>
                <span class="range">{{item.range}}</span>
            </div>
            <div>
                <div class="abnormalBox statusBox" v-if="true">异常心电</div>
                <div v-else class="normalBox statusBox">正常心电</div>
                <span class="text">系统分析：{{abnormal.desc}}</span>
            </div>
        </div>
    </div>
</template>

<script>
    import { fetchEcgDetailApp } from '@/api/data/checkreport'
    // import EcgChart from '@/components/ecgChart/mobileIndex'
    export default {
        data() {
            return {
                tableData: [],
                detail: {},
                ecgvalue: undefined,
                abnormal: {},
                ecgfeatures: [],
                checkCondition: [],
                abnormalFlag: [],
                defaultW: 414,
                status: true
            }
        },
        // components: {
        //     EcgChart
        // },
        created() {
            this.defaultW = window.screen.width
            // this.getData(this.$route.query.id)
            this.getData1(this.$route.query.bizId)
            // this.showEcg()
        },
        methods: {
            playEcg() {
                console.log('playEcg')
                this.status = false
                let aaa = document.getElementsByTagName('polyline')[0]
                let result1 = aaa.getBoundingClientRect().right
                console.log(result1)
                if (result1 > 0) {
                    let time = result1 / 500
                    console.log(time)
                    aaa.style.transform = 'translateX(-' + result1 + 'px)'
                    aaa.style.transition = 'transform ' + time + 's linear'
                }
                // transform: translateX(-1000px);
            },
            pauseEcg() {
                this.status = true
                let aaa = document.getElementsByTagName('polyline')[0]
                let left = aaa.getBoundingClientRect().left
                aaa.style.transform = 'translateX(' + left + 'px)'
                aaa.style.transition = 'transform 0s linear'
            },
            handleEcg(type) {
                console.log(type)
                this.status = true
                let aaa = document.getElementsByTagName('polyline')[0]
                let left = aaa.getBoundingClientRect().left
                let result
                if (type === 'forward') {
                    result = left - 100
                } else if (type === 'back') {
                    result = left + 100
                }
                aaa.style.transform = 'translateX(' + result + 'px)'
                aaa.style.transition = ''
            },
            showEcg() {
                this.headerData = {
                    'report_user': `姓名：张三`,
                    'report_sex': '性别：男',
                    'report_age': '年龄：20',
                    'report_hr': 'HR：80 10mm/mV 25mm/s',
                    'report_start_time': `测量时间：`,
                    'report_id': '报告编号：1490951160994'
                }
            },
            getData1(bizId) {
                fetchEcgDetailApp(bizId).then(res => {
                    console.log(res.data.data)
                    let analyse = JSON.parse(res.data.data.analyse)
                    this.abnormal = analyse.abnormal[0]
                    console.log(this.abnormal)
                    let ecgfeatures = analyse.ecgfeatures[0]
                    console.log(ecgfeatures)
                    this.name = res.data.data.iecgCheckCondition.name
                    this.checkCondition = res.data.data.iecgCheckCondition
                    console.log(this.checkCondition)

                    this.detail = res.data.data

                    this.tableData =  [{
                        type: 'QRS间期(毫秒)',
                        value: ecgfeatures.QRS * 1000,
                        range: '60-120',
                    }, {
                        type: 'P-R间期(毫秒)',
                        value: ecgfeatures.PR * 1000,
                        range: '120-200',
                    }, {
                        type: 'QT间期(毫秒)',
                        value: ecgfeatures.QT * 1000,
                        range: '320-440',
                    }, {
                        type: 'QTC间期(毫秒)',
                        value: parseInt(ecgfeatures.QTc * 1000),
                        range: '60-100',
                    }, {
                        type: '心率(次/分)',
                        value: res.data.data.avgHr,
                        range: '60-100',
                    }]
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
#checkreport {
    width: 414px;
    height: 100%;
    background: #FFF;
    margin-top: -22px;
    padding-top: 20px;
    overflow-y: scroll;
    .defaultBox {
        margin: 0 20px;
        position: relative;
        margin-top: 22px;
        .title {
            font-family: PingFangSC-Medium;
            font-size: 15px;
            color: #333333;
            letter-spacing: 0.75px;
            margin-left: 11px;
            &::before {
                content: '';
                width: 4px;
                height: 14px;
                background: #1DCA77;
                left: 0px;
                top: 5px;
                position: absolute;
            }
        }
    }
    .fff {
        margin-top: 22px;
        width: 414px;
        .handleBtn {
            display: flex;
            justify-content: space-around;
        }
    }
    .patientBox {
        .content {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            .name {
                font-family: PingFangSC-Regular;
                font-size: 12px;
                color: #4A4A4A;
                letter-spacing: 0.75px;
                text-align: center;
                margin-top: 13px;
            }
        }
    }
    .hrBox {
        .content {
            display: flex;
            justify-content: space-around;
            margin-top: 21px;
            .box {
                background: #FFFFFF;
                border: 1px solid rgba(151,151,151,0.14);
                // border: 1px solid #f56c6c;
                border-radius: 4px;
                width: 98px;
                height: 75px;
                text-align: center;
                padding-top: 15px;
                box-sizing: border-box;
                .hrNum {
                    text-align: left;
                    font-size: 15px;
                    font-weight: bolder;
                    position: relative;
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                }
                .first {
                    background-image: -webkit-linear-gradient(left,#F76B1C,#FAD961);
                }
                .second {
                    background-image: -webkit-linear-gradient(left,#FA70AA,#661BDD);
                }
                .third {
                    background-image: -webkit-linear-gradient(left,#62FFD0,#1070E0);
                }
                .name {
                    font-family: PingFangSC-Regular;
                    font-size: 14px;
                    color: #4A4A4A;
                    letter-spacing: 0.75px;
                    text-align: center;
                    display: block;
                }
            }
        } 
    }
    .rangeBox {
        .content {
            display: flex;
            justify-content: space-around;
            margin-top: 21px;
            .box {
                .chart {
                    width: 26px;
                    background: #1DCA77;
                    height: 100px;
                    margin: 0 auto;
                    position: relative;
                    .value {
                        margin: 0 auto;
                        display: block;
                        text-align: center;
                        font-family: PingFangSC-Regular;
                        font-size: 13px;
                        color: #072E48;
                        letter-spacing: 0.72px;

                        position: absolute;
                        z-index: 2;
                        top: -20px;
                    }
                }
                .name {
                    font-family: PingFangSC-Medium;
                    font-size: 13px;
                    color: #4A4A4A;
                    letter-spacing: 1.44px;
                    text-align: center;
                    display: block;
                    font-weight: 700;
                    margin-top: 8px;
                }
            }
        }
        .tipsContent {
            display: flex;
            justify-content: flex-start;
            margin-top: 21px;
            flex-wrap: wrap;
            .tips {
                font-family: PingFangSC-Regular;
                font-size: 10px;
                color: #9B9B9B;
                letter-spacing: 1.11px;
                position: relative;
                padding-left: 15px;
                width: calc(50% - 15px);
                &::before {
                    content: '';
                    width: 8px;
                    height: 8px;
                    background: #1DCA77;
                    left: 0px;
                    top: 5px;
                    position: absolute;
                }
            }
        }
    }
    .resultBox {
        margin-bottom: 50px;
        .head {
            background: #1dc9761a;
            display: flex;
            justify-content: space-between;
            margin-top: 21px;
            height: 46px;
            line-height: 46px;
            padding: 0 12px;
            .name {
                font-family: PingFangSC-Medium;
                font-size: 14px;
                color: #4A4A4A;
                letter-spacing: 0.75px;
                text-align: center;
            }
        }
        .content {
            display: flex;
            justify-content: space-between;
            background: rgba(155, 155, 155, 0.15);
            height: 46px;
            line-height: 46px;
            padding: 0 12px;
            margin-bottom: 2px;
            .type {
                font-family: PingFangSC-Regular;
                font-size: 12px;
                color: #4A4A4A;
                letter-spacing: 0.75px;
                flex: 1;
            }
            .valueBox {
                flex: 1;
                text-align: center;
                .value {
                    font-family: PingFangSC-Regular;
                    font-size: 12px;
                    color: #4A4A4A;
                    letter-spacing: 0.75px;
                    text-align: center;
                }
                .arrow {
                    width: 8px;
                    height: 10px;
                    margin-left: 5px;
                    display: inline-block;
                }
            }
            .range {
                font-family: PingFangSC-Regular;
                font-size: 12px;
                color: #9B9B9B;
                letter-spacing: 0.75px;
                flex: 1;
                text-align: right;
            }
        }
        .abnormalBox {
            width: 70px;
            height: 20px;
            font-family: PingFangSC-Medium;
            font-size: 14px;
            color: #FFFFFF;
            letter-spacing: 0.75px;
            text-align: center;
            line-height: 20px;
        }
        .abnormalBox {
            background: rgba(208,2,27,0.30);
        }
        .normalBox {
            background: rgba(245,166,35,0.50);
        }
        .text {
            font-family: PingFangSC-Medium;
            font-size: 14px;
            color: #4A4A4A;
            letter-spacing: 0.75px;
            margin-top: 8px;
        }
    }
}
</style>